<template>
  <div class="LawsAndRegulations">
    <div class="header">
      <img :src="baseUrl+Pic" alt />
    </div>
    <div class="tabs">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#0074DD"
        mode="horizontal"
        active-text-color="#FFFFFF"
        @select="handleSelect"
      >
        <el-menu-item :index="item.id" v-for="(item) in obj" :key="item.id">{{item.name}}</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      Pic: "",
      obj: [
        { name: "法律法规", id: "1" },
        { name: "网上举报", id: "2" },
        { name: "举报调查", id: "3" },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    get() {
      this.Api.ReportBGPic().then((res) => {
        if (res.code === "0") {
          this.Pic = res.data.platformBgpic;
        }
      });
    },
  },
  computed: {
    baseUrl() {
      return this.$store.state.fileIp;
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  width: 1919px;
  height: 230px;
}
/deep/ .tabs {
  width: 1919px;
  height: 54px;
  background: rgba(0, 116, 221, 1);
}
/deep/.el-menu.el-menu--horizontal {
  border-bottom: solid 1px #e6e6e6;
  padding-left: 450px;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 60px;
  font-size: 20px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #ffffff;
  margin-right: 180px;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background: rgba(0, 116, 221, 1);
  color: white;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item[data-v-27f8c7c0]:not(.is-disabled):hover {
  background: #0074dd;
  color: white;
}
</style>